<template>
	<Cell :ratio="ratio">
		<div class="swiper-container" ref="bannerRef">
			<div class="swiper-wrapper">
				<ImageView class="swiper-slide"
				           v-for="(imgUrl,index) in imgUrls"
				           :src="imgUrl"
				           @click="onItemClick(index)"
				>
				
				</ImageView>
			</div>
		</div>
	</Cell>
</template>

<script>
    import {ref, onUnmounted,nextTick} from 'vue'
    import Cell from '/src/components/common/cell'
    import ImageView from '/src/components/common/image-view'

    export default {
        name: "Banner",
        components: {
            Cell, ImageView
        },
        props: {
            ratio: {
                type: Number,
                default: 0.5
            },
            onItemClick: Function
        },
        setup(props) {
            const bannerRef = ref()
            const imgUrls = ref([])
            let swiper
            let isPlaying = false;
            const startPlay = (imgs) => {
                if (!imgs || imgs.length < 1) {
                    return;
                }
                if (isPlaying) {
                    return
                }
                isPlaying = true;
                imgUrls.value = imgs
	            nextTick(() => {
                    const Swiper = require('/src/libs/swiper-4.5.3')
                    swiper = new Swiper(bannerRef.value, {
                        autoplay:true,
                        delay:2000,
                        disableOnInteraction:false,
	                    loop:true
                    })
                })
              
            }
            onUnmounted(() => {
                if (swiper) {
                    swiper.destroy()
                }
            })
            return {
                ...props,
                bannerRef,
                imgUrls,
                startPlay
            }
        }
    }
</script>

<style scoped>
	.swiper-container {
		height: 100%;
	}
</style>
